<template>
  <view>
    <van-button type="info" block size="small" @click="onShow">
	  审批
	</van-button>
    <uni-drawer ref="showRight" mode="right" :mask-click="false">
      <scroll-view style="height: 100%" scroll-y="true">
        <uni-steps :options="option" direction="column" :active="active">
        </uni-steps>
        <button @click="onClose" type="primary">关闭</button>
      </scroll-view>
    </uni-drawer>
  </view>
</template>

<script>
export default {
  props: {
    levels: {},
  },
  data() {
    return {
      option: [],
      active: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if (this.levels.length > 0) {
        let arr = [];
        this.levels.forEach((item, index) => {
          arr.push({
            title: item.levelLabel + " " + item.flowUsername,
            flowStatus: item.flowStatus,
          });
        });
        arr.forEach((item, index) => {
          if (item.flowStatus == 1) {
            this.active = index;
            item.desc = "审核中";
          } else if (item.flowStatus == 2) {
            item.desc = "审核完成";
          } else if (item.flowStatus == 3) {
            this.active = index;
            item.desc = "审核不通过";
          } else if (item.flowStatus == 4) {
            item.desc = "等待上一位审核";
          } else {
            item.desc = "待审核";
          }
        });
        if (arr[arr.length - 1].flowStatus == 2) {
          arr.forEach((item) => {
            item.desc = "审核完成";
          });
          this.active = arr.length - 1;
          console.log("!!!!", this.active);
        }
        this.option = arr;
      }
    },
    onShow() {
      this.$refs.showRight.open();
    },
    onClose() {
      this.$refs.showRight.close();
    },
  },
};
</script>